<template>
	<view class="p-2 bg-white">
		<view class="py-2 pl-20 position-relative line-h">
			<view class="position-absolute font-md" style="top:40upx;left:20upx;">
			<text class="text-danger">*</text>浆站：
			</view>
			<input class="border p-2 w-100 d-block line-h border-box input-defind rounded" 
			 :class="focusClass.shCustomerInfo ? 'input-border-color' : ''"
			placeholder-class="text-light-muted"  disabled
			 @focus="focus('shCustomerInfo')" @blur="blur('shCustomerInfo')"
			@click="showMulLinkageThreePicker" placeholder="请选择浆站"
			v-model="formData.shCustomerInfo"/>
			<select-customer :themeColor="themeColor"  ref="mpvueCityPicker" :pickerValueDefault="pickerValue" @onConfirm="onConfirm"></select-customer>
		</view>
		<view class="py-2 pl-20 position-relative line-h">
			<view class="position-absolute font-md" style="top:40upx;left:20upx;">
			<text class="text-danger">*</text>备件类型：
			</view>
			<search-picker :range="materialAll" placeholder="请选择备件" leftValue="name" rightValue="type" @selectItem="selectItem"  :value="formData.cgMaterial" @getSearchAll="getSearchAll"></search-picker>
		</view>
		
		<view class="py-2 pl-20 position-relative line-h">
			<view class="position-absolute font-md" style="top:40upx;left:20upx;">
				备件批号：
			</view>
			<input type="text"  placeholder="备件批号" 
			class="border p-2 w-100 d-block line-h border-box input-defind rounded" 
			 :class="focusClass.batch ? 'input-border-color' : ''"
			placeholder-class="text-light-muted" 
			v-model="formData.batch"
			 @focus="focus('batch')" @blur="blur('batch')"/>
		</view>
		<view class="py-2 pl-20 position-relative line-h">
			<view class="position-absolute font-md" style="top:40upx;left:20upx;">
				备件编码：
			</view>
			<input type="text"  placeholder="请输入备件编码" 
			class="border p-2 w-100 d-block line-h border-box input-defind rounded" 
			 :class="focusClass.code ? 'input-border-color' : ''"
			placeholder-class="text-light-muted" 
			v-model="formData.code"
			 @focus="focus('code')" @blur="blur('code')"/>
		</view>
		
		<view class="main-bg-color text-white rounded mt-4 font-md text-center py-2" hover-class="main-bg-hover-color" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	import selectCustomer from "@/components/selectCustomer/selectCustomer.vue"
	import searchPicker from "@/components/searchPicker/searchPicker.vue"
	export default {
		components:{
			selectCustomer,
			searchPicker
		},
		 data(){
		        return {
				themeColor: '#ec4d49',
		        pickerValue:[0],
				type: '',
				materialAll: [],
				formData:{
					shCustomerInfo: '',
					pid: '',/**浆站id */
					name: '',/**物料id */
					cgMaterial: '',/**物料名称 */
					batch: '',
					code:''
				},
				focusClass:{
					shCustomerInfo: false,/**浆站id */
					cgMaterial: false,/**物料名称 */
					batch: false,
					code:false
				}
		    }
		},
		onLoad(e){
			 this.type = e.type;
			 uni.setNavigationBarTitle({
				 title: this.type === 'add' ? '新增零件' : '修改零件'
			 })
		},
		methods: {
			focus(key){
				this.focusClass[key] = true
			},
			blur(key){
				this.focusClass[key] = false
			},
			showMulLinkageThreePicker(){
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e){
				this.formData.shCustomerInfo= e.selectedObj.name;
				this.formData.pid =e.selectedObj.id;
			},
			/** 获取所有物料*/
			getMaterialAll(data){
				let self = this
				self.$H.get(api.materialAll,data).then(res=>{
					self.materialAll = res.content;
				})
			},
			selectItem(e){
				this.formData.cgMaterial = e.name;
				this.formData.name = e.id;
			},
			getSearchAll(e){
				this.getMaterialAll({keywords:this.formData.cgMaterial})
			},
			submit(){
				let self = this;
				if(self.formData.shCustomerInfo===''){
					uni.showToast({
						title:'浆站不能为空',
						icon:'none'
					})
					return
				}
				if(self.formData.cgMaterial===''){
					uni.showToast({
						title:'备件不能为空',
						icon:'none'
					})
					return
				}
				let postData = {
						pid: self.formData.pid,
						name: self.formData.name,
						batch: self.formData.batch,
						code: self.formData.code
					};
					uni.showLoading({
						title:'数据提交中'
					})
					self.$H.post(api.insertParts,postData).then(res=>{
						uni.showToast({
							title:'提交成功',
							icon:'success'
						})
						uni.navigateBack()
					})
			}
		}
	}
</script>

<style>
</style>
